<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的模板</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <link rel="icon" type="image/ico" href="/pc/inbox_icon.png">
  <style>
    /* 自定义渐变背景 */
    .gradient-bg {
      background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    /* 卡片悬停效果 */
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* 按钮悬停效果 */
    .button-hover {
      transition: all 0.3s ease;
    }
    .button-hover:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body class="min-h-screen gradient-bg p-8 font-sans">
<!-- Header Section -->
<div class="mb-8">
  <div class="flex items-center justify-between mb-6">
    <div class="space-y-1">
      <h2 class="text-2xl font-semibold text-gray-800">我的模板</h2>
      <p class="text-sm text-gray-500">您已保存 12 个模板</p>
    </div>
    <div class="flex gap-2">
      <button class="button-hover flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        筛选
      </button>
      <button class="button-hover flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
        排序
      </button>
    </div>
  </div>

  <!-- Search Section -->
  <div class="relative w-full max-w-md mb-8">
    <input
            type="text"
            placeholder="搜索模板"
            class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <svg class="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  </div>
</div>

<!-- Template Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <!-- Template Card 1 -->
  <div class="card-hover bg-white p-6 rounded-lg shadow-md">
    <div class="relative aspect-video bg-gray-100 rounded-lg mb-4 flex items-center justify-center">
      <svg class="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    </div>
    <h3 class="text-lg font-semibold text-gray-800 mb-2">欢迎邮件模板</h3>
    <p class="text-sm text-gray-600 mb-4">适用于新用户欢迎邮件。</p>
    <div class="flex gap-2">
      <button class="button-hover flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        编辑
      </button>
      <button class="button-hover flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        删除
      </button>
    </div>
  </div>

  <!-- Template Card 2 -->
  <div class="card-hover bg-white p-6 rounded-lg shadow-md">
    <div class="relative aspect-video bg-gray-100 rounded-lg mb-4 flex items-center justify-center">
      <svg class="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    </div>
    <h3 class="text-lg font-semibold text-gray-800 mb-2">促销邮件模板</h3>
    <p class="text-sm text-gray-600 mb-4">适用于节日促销活动。</p>
    <div class="flex gap-2">
      <button class="button-hover flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        编辑
      </button>
      <button class="button-hover flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
        删除
      </button>
    </div>
  </div>

  <!-- Add more template cards here -->
</div>

<!-- Pagination -->
<div class="flex items-center justify-center gap-2 mt-8">
  <button class="button-hover w-8 h-8 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
    </svg>
  </button>
  <button class="button-hover w-8 h-8 flex items-center justify-center bg-gray-200 rounded-lg">
    1
  </button>
  <button class="button-hover w-8 h-8 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
    </svg>
  </button>
</div>
</body>
</html>